<template>
  <ul class="portfolio-list">
    <li class="portfolio-item tap-active" v-for="(item, index) in portfolioList" :key="item.portfolio.id" @click="$router.push(`/portfolio/detail/${item.portfolio.id}/`)">
      <div class="item-header">
        <h3>{{item.portfolio.name}}</h3>
      </div>
      <div class="item-body van-hairline--top van-hairline--bottom">
        <van-row style="width: 100%">
          <van-col span="10">
            <div class="adviser">
              <van-image lazy-load  width="35px" height="35px" round :src="item.tgBaseInfo.avatar" class="avatar" @click.native.stop="$router.push(`/adviser/detail/${item.portfolio.tgId}/`)"></van-image>
              <div class="info">
                <p class="name">{{item.tgBaseInfo.name}}</p>
                <p style="font-size: 10px;">{{item.tgBaseInfo.deptName}}</p>
              </div>
              <div class="dashed-line"></div>
            </div>
          </van-col>
          <van-col span="5">
            <div class="profit">
              <p style="font-size: 14px;" :class="item.relation[profit] | numberColor">{{item.relation[profit] | numberFormat('0.00%')}}</p>
              <span>{{profitText}}</span>
            </div>
          </van-col>
          <van-col span="9">
            <div class="portfolio">
              <div class="text-right">
                <p>胜率</p>
                <p>最大回撤</p>
              </div>
              <div class="text-left">
                <p class="rate">{{item.relation.successRate | numberFormat('0.00%')}}</p>
                <p class="rate">{{item.relation.maxRetracement | numberFormat('0.00%')}}</p>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="item-footer text-right">
        <div v-if="item.portfolio.isThumbsUp" class="like" @click.stop="likePortfolio(item.portfolio, 0, index)">
          <span>{{item.portfolio.thumbsUpCount}}</span>
          <i class="icon icon-like-red" style="width: 16px; height: 16px;"></i>
        </div>
        <div v-else class="like" @click.stop="likePortfolio(item.portfolio, 1, index)">
          <span>{{item.portfolio.thumbsUpCount}}</span>
          <i class="icon icon-like" style="width: 16px; height: 16px;"></i>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import {  mapGetters, mapActions } from 'vuex';
import { likePortfolio } from '../../../api/portfolio';

export default {
  props: {
    portfolioList: {
      type: Array,
    },

    profit: {
      type: String
    },

    profitText: {
      type: String
    }
  },

  computed: {
    ...mapGetters(['isLogin'])
  },

  methods: {
    ...mapActions(['login']),

    async likePortfolio(portfolio, isLike, index) {
      try {
        if(!this.isLogin) {
          return this.login();
        }
        const data = await likePortfolio(portfolio.id, isLike);
        if (data.code === 0) {
          if (isLike) {
            portfolio.isThumbsUp = 1;
            portfolio.thumbsUpCount ++;
            this.$toast('点赞成功');
          } else {
            portfolio.isThumbsUp = 0;
            portfolio.thumbsUpCount --;
            this.$toast('取消点赞成功');
          }
          this.$emit('change', index, this.portfolioList[index])
        }
      } catch (error) {
        console.error(error);
      }
    }
  }
}
</script>

<style lang="less">
.portfolio-list {
  .portfolio-item {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;

    .item-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .price {
        text-align: right;
        flex: 1;

        .free {
          background-image: linear-gradient(90deg, #EB6030 0%, #E8302E 100%);
          color: #fff;
          font-size: 14px;
          padding: 1px 3px;
        }
      }
    }

    .item-body {
      padding: 15px 0;
      display: flex;
      align-items: center;
      color: #919bb2;
      font-size: 13px;
      line-height: 1.45;

      .adviser {
        display: flex;
        align-items: center;
        position: relative;

        .dashed-line {
          border-left: 0.5px dashed #c1c1c1;
          height: 100%;
          width: 0.5px;
          position: absolute;
          right: 15px;
        }

        .info {
          max-width: 100%;
          padding-left: 40px;
          position: absolute;

          p {
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .name {
            font-size: 14px;
            color: #121d32;
          }
        }
      }

      .profit {
        line-height: 18px;
      }

      .portfolio {
        display: flex;
        align-items: center;
        .rate {
          margin-left: 15px;
          color: #121d32;
        }
      }
    }

    .item-footer {
      padding-top: 15px;
      font-size: 11px;
      color: #999;

      .like {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;

        span {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
